<template>
	<div class="dynamic-table">
		<div class="dynamic-row">
			<div class="dyn-left">
				<slot name="vux-search" />
			</div>
			<div class="dyn-right">
				<el-button @click="handleDropDown" class="ml8 mb8" type="primary">
					<el-icon><ele-Aim /></el-icon>
					&nbsp;表头配置
				</el-button>
			</div>
		</div>

		<div>
			<vxe-table ref="dyTableRef" :border="border" :row-config="{ keyField: rowId, isCurrent: isCurrent, isHover: isHover }" :sort-config="sortConfig" :checkbox-config="checkboxConfig" show-overflow :auto-resize="true" :sync-resize="true" align="center" :max-height="maxHeight" :scroll-y="{ gt: 20 }" empty-text="暂无数据" @sort-change="handleSortChange" @checkbox-all="handleSelectionChange" @checkbox-change="handleSelectionChange" @current-change="handleCurrentChange" :loading="loading" :data="tableData">
				<slot name="vux-column" />
			</vxe-table>
		</div>
	</div>
	<div class="drawer-dialog">
		<el-drawer v-model="visible" modal-class="drawer-modal" :modal="true" size="250" :close-on-click-modal="true" :show-close="false">
			<template #header="{ close }">
				<div class="close-drawer" @click="close">
					<div class="arrow" />
				</div>
			</template>

			<div class="drop-down-title">
				<el-row>
					<el-col :span="12">列展示</el-col>
					<el-col :span="12" style="text-align: right">
						<a @click.stop="handleCancelChecked" v-if="isAll">取消全选</a>
						<a @click.stop="handleCheckBoxRest" v-else>全选</a>
					</el-col>
				</el-row>
			</div>
			<el-checkbox-group v-model="colmunCheckBox" @change="checkBoxGroupChange">
				<div v-for="(item, index) in tableColumnsList" :key="index">
					<el-checkbox :label="item.label">{{ item.title ? item.title : '复选框' }}</el-checkbox>
				</div>
			</el-checkbox-group>
		</el-drawer>
	</div>
</template>
<script>
export default defineComponent({
	name: 'DyFiledTable',
	props: {
		loading: {
			//表格加载
			type: Boolean,
			default: false,
		},
		tableData: {
			//表格数据源
			type: Array,
			required: true,
		},
		rowId: {
			type: String,
			default: 'id',
		},
		border: {
			//表格是否带border
			//表格是否带border
			type: String || Boolean,
			default: 'default',
		},
		maxHeight: {
			type: Number,
			default: 568,
		},
		curTableColumnObj: {
			//表格数据列
			type: Object,
			required: true,
		},
		checkboxConfig: {
			type: Object,
			default: function () {
				return {}
			},
		},
		// 当鼠标点击行时，是否要高亮当前行
		isCurrent: {
			type: Boolean,
			default: false,
		},
		// 当鼠标移到行时，是否要高亮当前行
		isHover: {
			type: Boolean,
			default: true,
		},
		seqConfig: {
			type: Object,
			default: () => {},
		},
		sortConfig: {
			type: Object,
			default: () => {},
		},
	},
	emits: ['on-selection-change', 'on-sort-change', 'on-search-status', 'handleSearch', 'on-current-change', 'on-cancel-check'],
	setup(props, context) {
		const state = reactive({
			visible: false,
			searchStatus: true,
			colmunCheckBox: [], //复选框选中接收的列
			tableColumnsList: [], //复选框展示的列选项
			dyTableRef: null,
			isAll: false,
		})
		const handleCancelChecked = () => {
			console.log('2222')
			state.isAll = false
			context.emit('on-cancel-check')
		}

		// 触发选择框 获取的回调
		const handleSelectionChange = ({ records }) => {
			context.emit('on-selection-change', records)
		}
		// 触发排序 获取的回调
		const handleSortChange = ({ order, property }) => {
			context.emit('on-sort-change', property, order)
		}
		// 选中行触发
		const handleCurrentChange = ({ row }) => {
			context.emit('on-current-change', row)
		}
		// 下拉显示
		const handleDropDown = () => {
			state.visible = true
		}
		//关闭下拉
		const handleCloseDropDown = () => {
			state.visible = false
		}
		//重置选择框
		const handleCheckBoxRest = () => {
			state.isAll = true
			state.colmunCheckBox = props.curTableColumnObj.curColumns
			props.curTableColumnObj.curColumns.forEach(item => {
				if (state.colmunCheckBox.includes(item)) {
					state.dyTableRef.showColumn(state.dyTableRef.getColumnByField(item))
				} else {
					state.dyTableRef.hideColumn(state.dyTableRef.getColumnByField(item))
				}
			})
		}
		// 选择框改变时 回调
		const checkBoxGroupChange = e => {
			state.colmunCheckBox = e
			props.curTableColumnObj.curColumns.forEach(item => {
				if (state.colmunCheckBox.includes(item)) {
					state.dyTableRef.showColumn(state.dyTableRef.getColumnByField(item))
				} else {
					state.dyTableRef.hideColumn(state.dyTableRef.getColumnByField(item))
				}
			})
		}
		watch(
			() => props.curTableColumnObj,
			value => {
				// 获取当前复选框 选中的选项  默认全选
				state.colmunCheckBox = value.checked
				// 获取下拉复选框全部数据
				state.tableColumnsList = value.checkBoxColumn
			},
			{ immediate: true, deep: true }
		)
		return {
			...toRefs(state),
			handleSelectionChange,
			handleSortChange,
			handleDropDown,
			handleCloseDropDown,
			handleCheckBoxRest,
			checkBoxGroupChange,
			handleCurrentChange,
			handleCancelChecked,
		}
	},
})
</script>
<style lang="scss" scoped>
.dynamic-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.drop-down-title {
	height: 45px;
	line-height: 45px;
	font-size: 15px;
	padding: 5px 20px;
	border-bottom: 1px solid rgb(232, 234, 236);
	a {
		cursor: pointer;
	}
}
.el-checkbox-group {
	margin-left: 20px;
}
.el-dropdown-menu--medium {
	.el-dropdown-menu__item {
		padding: 0px 20px 0px 12px !important;
		&:hover {
			color: #0052cc !important;
		}
	}
}
.drawer-dialog {
	:deep(.el-drawer) {
		min-width: 200px;
		width: 20% !important;
		overflow: initial !important;
		.el-drawer__header {
			border: 0px;
			height: 0px;
		}
		.close-drawer {
			position: absolute;
			left: -36px;
			top: 25vh;
			width: 36px;
			height: 36px;
			border-radius: 4px 0px 0px 4px;
			background: #0052cc url('@/assets/asset/back-arrow.png') no-repeat center;
			background-size: 15px;
			cursor: pointer;
		}
		.drawer-content {
			padding: 0px 25px;
			.drawer-title {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding-top: 20px;
				padding-bottom: 15px;
				.title-block {
					display: flex;
					justify-content: flex-start;
					align-items: center;
					.title {
						font-size: 20px;
						font-style: normal;
						font-weight: 500;
						color: #202d40;
						margin-right: 5px;
					}
				}
			}
		}
	}
}
</style>
